<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件</title>
  </head>

  <body>
    <div id="app">
      <h1>父组件</h1>
      <h1>{{msg}}</h1>
      <p>------------------------------</p>
      <javascript></javascript>
      <Hello></Hello>
    </div>

  </body>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false;
    人生没有捷径， 无论是抓龙虾， 还是要去二仙桥， 必须要走成华大道一样。 坚持初心方得始终。
    /* 
    一.如何定义一个子组件？
      1.如何定义一个组件？--使用Vue.extends(options)去创建
      2.javaScript本质上是一个函数，我们后面写<javaScript/>,Vue帮我们去new JavaScript
      3.Vue.extends(options)中的options是配置对象，这个配置和我们new Vue(options)一样，区别如下：
        3.1 不能有el属性去指定容器
            原因：所有组件实例最终要被一个VM所管理，vm中会指定好el,即：组件让位给那个容器
        3.2 data必须写成函数
            原因：为了确保多个组件内的数据不会相互污染
        3.3 组件内的模板解构要配置在template里面，
          1. 使用模板字符串
          2.模板字符串必须只有一个根标签
    二.注册一个组件
        2.1 全局注册
            Vue.component(组件名, 组件)
        2.2 局部注册      
            在vm里添加一个components里注册
    三.特别提示：
        3.1 javaScript确实是构造函数，但不是我们亲手写的School，是Vue.extend生成的。
        3.2 Vue.extend调用的返回值是VueComponent构造函数，所以new javaScript其实就是在new VueComponent.
        3.3 所谓组件实例，就是VueComponent创建的实例，简称vc
            所谓Vue实例，就是Vue创建的实例，简称vm
    四.最重要的关系总结：
        VueComponent继承了Vue,所以Vue.prototype上得属性和方法，vc度可以看得见               
    */
    //1.定义一个组件
    const javascript = Vue.extend({
      // el: "#app",
      data() {
        return {
          course: "javaScript"
        }
      },
      template: `
      <div>
        <h2>我是JS子组件</h2>
        <h2>{{course}}</h2>
      </div>`
    })

    const Hello = Vue.extend({
      data() {
        return {
          course: "Vue"
        }
      },
      template: `
      <div>
        <h2>Hello子组件</h2>
        <h2>{{course}}</h2>
      </div>
      `
    });

    /* const App = Vue.extend({
      data() {
        return {
          course: "APP"
        }
      },
      template: `
      <div>
        <Hello/>
        <javascript/>
      </div>
      `
    }) */

    // 2.全局注册一个组件
    // Vue.component('javascript', javaScript)

    // console.log(typeof (javaScript)); //function

    // 定义一个vm,去管理所有的组件
    const vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "编程课程",
        }
      },
      components: {
        javascript,
        Hello
      }
    })
  </script>

</html>